<template>
<div>
   <van-nav-bar title="收款明细" left-arrow :border="false" v-if="type==1">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="hidden"/>
   </van-nav-bar>
   <van-nav-bar title="付款明细" left-arrow :border="false" v-if="type==2">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="hidden"/>
   </van-nav-bar>   
  <div class="main" v-if="type==1">
    <div class="header">
      <div class="one">{{formatFixed2(detailInfo.ordersPrice+detailInfo.goodsFreight)}}<span style="font-size:12px">元</span></div>
      <div class="tip">钱款已打入您的集市账户</div>
    </div>  
    <div class="middle">
      <div class="driver"></div>
      <div class="two">商品总价
        <span style="float:right;color:#333333">+{{formatFixed2(detailInfo.ordersPrice)}}元</span>
      </div>
      <div class="three">商品单价
        <span style="float:right;">+{{formatFixed2(detailInfo.ordersPrice/detailInfo.goodsCount)}}元</span>
      </div>
      <div class="four">购买数量
        <span style="float:right;">x{{detailInfo.goodsCount}}件</span>
      </div>
      <div class="five">运费
        <span style="float:right">+{{formatFixed2(detailInfo.goodsFreight)}}元</span>
      </div>
    </div>
  </div>
  
  <div class="main" v-if="type==2">
    <div class="header">
      <div class="one">{{formatFixed2(detailInfo.ordersPrice+detailInfo.goodsFreight)}}<span style="font-size:12px">元</span></div>
      <div class="tip">钱款已打入卖家的集市账户</div>
    </div>  
    <div class="middle">
      <div class="driver"></div>
      <div class="two">商品总价
        <span style="float:right;color:#333333">-{{formatFixed2(detailInfo.ordersPrice)}}元</span>
      </div>
      <div class="three">商品单价
        <span style="float:right;">-{{formatFixed2(detailInfo.ordersPrice/detailInfo.goodsCount)}}元</span>
      </div>
      <div class="four">购买数量
        <span style="float:right;">x{{detailInfo.goodsCount}}件</span>
      </div>
      <div class="five">运费
        <span style="float:right">-{{formatFixed2(detailInfo.goodsFreight)}}元</span>
      </div>
    </div>
  </div>  
  
  
  
  
</div>
</template>
<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {
  data() {
    return {
    	
    };
  },
  props:['detailInfo','type'],
  methods:{
    hidden(){
    	this.$emit('hidden')
    }
  },
  mixins:[publicFun],	
  mounted() {
     
  }
};
</script>
<style lang="scss" scoped>
*{box-sizing: border-box;}
.main {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 200%;
  background-color: #f8f8f8;
  .header {
    background-color: #ffffff;
    text-align: center;
    padding: 50px 20px ;
    .one { 
      color:#F22613;
      font-size: 24px;
    }
    .tip{
      color:#999999;
      font-size: 12px;
      margin-top:10px;
    }
  }
  .driver{
    margin:0 auto;
    width: 90%;
    height: 1px;
    background-color: #E5E5E5;
  }
  .middle{
    background-color: #ffffff;
    .two{
      width: 95%;
      padding: 20px 10px;
      font-size:16px;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    .three{
      width: 95%;
      padding: 5px 10px 5px 28px;
      font-size:14px;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    .four{
      width: 95%;
      padding: 5px 10px 5px 28px;
      font-size:14px;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    .five{
      width: 95%;
      padding: 20px 10px 40px 20px;
      font-size:14px;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
  }
}
</style>
